<template>
    <div>
        <!-- 头部搜索 -->
        <div class="header">
            <span class="iconfont iconjiantou2" @click="goBack"></span>
            <div class="searchWrapper">
                <span class="iconfont iconsearch"></span>
                <input type="text" v-model="keyword" @keyup.enter="search">
            </div>
            <div class="btnSearch" @click="search">搜索</div>
        </div>

        <!-- 建议列表 -->
        <div class="suggestionList" v-if="postList.length == 0">
            <h2>搜索记录</h2>
            <div class="historyList">
                <div 
                    class="item" 
                    v-for="(history,index) in historyList"
                    :key="index"
                    @click="handleHistory(history)"
                >
                    {{history}}
                </div>
            </div>
            <!-- <div class="hotList"></div> -->
        </div>

        <div class="postList">
            <PostItem
                v-for="post in postList"
                :key="post.id"
                :postData="post"
            />
        </div>
    </div>
</template>

<script>
    import PostItem from '../components/PostItem'
    export default {
        components: {
            PostItem
        },
        created() {
            // 页面进入时如果发现本地储存有数据, 那么就获取数据恢复记录
            if (localStorage.getItem('history')) {
                this.historyList = JSON.parse(localStorage.getItem('history'))
            }
        },
        watch: {
            keyword() {
                // 如果用户将关键字全部删除
                // 应该重新显示搜索建议
                if (this.keyword == '') {
                    this.postList = []
                }
            },
            historyList() {
                localStorage.setItem('history', JSON.stringify(this.historyList))
            }
        },
        data() {
            return {
                keyword: '',
                postList: [],
                historyList: []
            }
        },
        methods: {
            search() {
                // 搜索时 判断这个关键字是否已经记录过, 郭茹没有
                // 则添加进搜索记录当中
                if (this.historyList.indexOf(this.keyword) == -1) {
                    this.historyList.unshift(this.keyword)
                }
                // 发送请求获取文章结果
                this.$axios({
                    url: '/post_search',
                    params: {
                        keyword: this.keyword
                    }
                }).then(res=>{
                    console.log(res.data);
                    this.postList = res.data.data
                })
            },
            goBack() {
                // 如果有结果, 应该回到搜索建议
                if (this.postList.length > 0) {
                    this.keyword = ''
                    this.postList = []
                }else {
                    // 没有结果本来就显示建议, 才后退
                    this.$router.back()
                }
            },
            handleHistory(newKeyword) {
                // 这时候是搜索记录被点击
                // 1. 修改当前 keyword
                this.keyword = newKeyword
                // 2. 发送搜索请求
                this.search()
            }
        }
    };
</script>

<style lang="less" scoped>
.header {
    display: flex;
    padding: 10/360*100vw 20/360*100vw;
    align-items: center;
    .searchWrapper {
        flex: 1;
        border: 1px solid #888;
        border-radius: 18/360*100vw;
        padding: 0 18/360*100vw;
        margin: 0 12/360*100vw;
        input {
            margin-left: 10/360*100vw;
            line-height: 38/360*100vw;
            width: 88%;
            border: none;
            outline: none;
        }
    }
}
.suggestionList {
    padding: 10/360*100vw 20/360*100vw;
    h2 {
        font-size: 16/360*100vw;
        padding-bottom: 20/360*100vw;
    }
    .historyList {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #e4e4e4;
        padding-bottom: 10/360*100vw;
        .item {
            color: #333;
            font-size: 14/360*100vw;
            padding: 10/360*100vw;
        }
    }
}
</style>